<template>
  <div class="home-container" ref="pronbit">
    <navLink :language="language" @languageClick="languageClick" :avtive="1"></navLink>
    <div class="bg">
      <img src="../../static/ic/contact_bg.jpg" alt="">
    </div>
    <div class="aboutUs_content w">
      <div class="text">
        <p>
          {{ language=='EN'?'JiYi Electronics Technology Co., Ltd. is a company focusing on electronic components, cost-effective line cards, and inventory management. We are committed to providing comprehensive electronic component solutions to meet our customers needs in production and manufacturing processes.'
          :'极壹电子科技有限公司是一家专注于电子元器件、降低成本的线卡和库存管理的企业。我们致力于为客户提供全方位的电子元器件解决方案，以满足其在生产和制造过程中的需求。' }}
        </p>
        <p>                
                  {{ language=='EN'?'As the company grows, we will pay attention to our existing customers and expand our service scope. This means that we will strive to establish closer cooperation with existing customers to meet their evolving needs. We will continuously listen to customer feedback and suggestions, improve and optimize our services to ensure they receive the best experience and value. At the same time, as our service scope expands, we will continuously seek new business opportunities and partners to provide a wider range of products and services, offering more comprehensive solutions to our customers. We believe that through close cooperation with existing customers and the expansion of service scope, we can achieve greater success and growth together.'
        :'随着公司的发展壮大，我们将继续重视老客户，并拓展我们的服务范围。这意味着我们将致力于与现有客户建立更紧密的合作关系，以满足他们不断变化的需求。我们将不断倾听客户的反馈和建议，不断改进和优化我们的服务，确保他们得到最佳的体验和价值。同时，随着我们服务范围的扩大，我们将不断寻找新的商机和合作伙伴，以提供更多种类的产品和服务，为客户提供更全面的解决方案。我们坚信，通过与老客户的紧密合作和服务范围的不断扩大，我们能够共同实现更大的成功和成长。' }}
                 </p>
      </div>
      <div class="advantage w">
        <div class="advantage_item">
          <img src="../../static/ic/advantage1@2x.png" alt="">
          <span>01</span>
          <div class="advantage_text">
            <p> {{ language=='EN'?'Electronic Component Distribution':'电子元气供应商'}}</p>
          </div>
        </div>
        <div class="advantage_item">
          <img src="../../static/ic/advantage2@2x.png" alt="">
          <span>02</span>
          <div class="advantage_text">
            <p> {{ language=='EN'?'Cost-reduction Line Card':'低成本线卡'}}</p>
          </div>
        </div>
        <div class="advantage_item">
          <img src="../../static/ic/advantage3@2x.png" alt="">
          <span>03</span>
          <div class="advantage_text">
            <p> {{ language=='EN'?'Inventory Management':'库存管理'}}</p>

          </div>
        </div>
        <div class="advantage_item">
          <img src="../../static/ic/advantage4@2x.png" alt="">
          <span>04</span>
          <div class="advantage_text">
            <p> {{ language=='EN'?'Quality Control':'质量管控'}}</p>

          </div>
        </div>
        <div class="advantage_item">
          <img src="../../static/ic/advantage5@2x.png" alt="">
          <span>05</span>
          <div class="advantage_text">
            <p>
                            {{ language=='EN'?'Professional logistics':'专业物流'}}
                        </p>

          </div>
        </div>
      </div>
      <div class="button_container">
        <a href="/contactUs">
            <button type="button"> {{ language=='EN'?'contact us':'联系我们' }}</button>
        </a>
    </div>


    </div>

    <pageFooter></pageFooter>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageFooter from "../../components/pageFooter.vue";
import navLink from "../../components/navLink.vue";

export default {
  components: { pageFooter, navLink },
  computed: {
    ...mapState(["keyWord", 'language']),
  },
  methods: {
    languageClick(type) {
      this.$store.commit('changeLanguage', type)
    }
  },
}

</script>

<style lang="scss" scoped>
html body {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'iconfont';
  src: url('../../static/font/iconfont.woff2?t=1708347338261') format('woff2'),
    url('../../static/font/iconfont.woff?t=1708347338261') format('woff'),
    url('../../static/font/iconfont.ttf?t=1708347338261') format('truetype');
}

.w {
  width: 1200px;
  margin: 0 auto;
}

ul li {
  list-style: none;
}

.home-container {
  background-color: #ffffff;
  width: 100%;
  padding-top: 110px;
  box-sizing: border-box;
  font-family: "Outfit", Sans-serif;

  .bg {
    img {
      width: 100%;
      height: 266px;
    }
  }

  .aboutUs_content {
    .text {
      margin-top: 32px;

      p {
        font-family: Poppins;
        color: #78767f;
        font-size: 18px;
        text-indent: 2em;
      }

      h2 {
        font-family: Poppins;
        font-weight: 600;
        color: #171324;
        font-size: 18px;
        margin: 50px 0 20px 0;
        text-indent: 2em;
      }
    }

    .advantage {
      display: flex;

      margin-top: 35px;
      justify-content: space-between;

      .advantage_item {
        width: 231px;
        height: 161px;
        background-color: #006cd9;
        position: relative;

        img {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 21px;
          left: 17px;
        }

        span {
          position: absolute;
          width: 39px;
          height: 32px;
          font-family: PingFang SC;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.26);
          font-size: 38px;
          top: 18px;
          left: 179px;
        }

        .advantage_text {
          position: absolute;
          width: 192px;
          height: 56px;
          top: 85px;
          left: 26px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          font-size: 16px;
          text-align: right;
        }
      }
    }

    .button_container {
            width: 100%;
            display: flex;
            align-items: center;
            a {
                display: block;
                // width: 280px;
                // height: 48px;
                margin: 44px auto;
                button {
                    width: 280px;
                    height: 48px;
                    // margin: 44px auto;
                    background-color: #006cd9;
                    color: #ffffff;
                    font-weight: 700;
                }
            }
        }

  }

}
</style>

<style lang="scss">
.banner {
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background-color: #fcbc06;
    opacity: 0.5;
    transform: scale(1);
  }

  .swiper-pagination-bullet-active {
    width: 40px;
    border-radius: 5px;
    opacity: 1;
  }

  .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 50px;
  }
}
</style>